<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 员工打卡记录
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">


                <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="选择日期"
                    v-model="queryInfo.edate"></el-date-picker>

                <el-input v-model="queryInfo.eid" placeholder="员工编号" class="handle-input mr10"></el-input>

                <el-input v-model="queryInfo.ename" placeholder="员工姓名" class="handle-input mr10"></el-input>



                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>

                <el-button type="primary" @click="flush">重置</el-button>

            </div>


            <el-table :data="pb.list" border class="table" ref="multipleTable" header-cell-class-name="table-header">

                <el-table-column fixed prop="eid" label="员工编号" width="100" align="center"></el-table-column>
                <el-table-column fixed prop="edate" label="打卡日期" align="center"></el-table-column>
                <el-table-column prop="ename" label="员工姓名" align="center"></el-table-column>
                <el-table-column prop="egender" label="员工性别" align="center"></el-table-column>
                <el-table-column prop="ephone" label="员工电话" align="center"></el-table-column>
                <el-table-column label="详情信息" align="center" width="200px">

                    <template #default="scope" align="center">
                        <el-button type="primary" style="margin-left: 16px" @click="btu(scope.row)"
                            @row-click="btn((scope.$index, scope.row))">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="pb.currentPage"
                    :page-size="pb.pageSize" :total="pb.totalCount" @current-change="handlePageChange"></el-pagination>
            </div>

            <el-drawer v-model="drawer" size="40%" title="I am the title" :with-header="false">
                <span>详情预览</span><br><br><br>
                <div class="box">

                    <el-form :model="ruleForm" :rules="rules" ref="ruleFormsss" label-width="100px">

                        <el-form-item label="员工编号" prop="eid">
                            <el-input v-model="ruleForm.eid" readonly></el-input>
                        </el-form-item>
                        <el-form-item label="打卡日期" prop="edate">
                            <el-input v-model="ruleForm.edate" readonly></el-input>
                        </el-form-item>

                        <el-form-item label="员工姓名" prop="ename">
                            <el-input v-model="ruleForm.ename" readonly></el-input>
                        </el-form-item>

                        <el-form-item label="员工性别" prop="egender">
                            <el-input v-model="ruleForm.egender" readonly></el-input>
                        </el-form-item>

                        <el-form-item label="员工电话" prop="ephone">
                            <el-input v-model="ruleForm.ephone" readonly></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" size="medium" @click="close">关闭</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-drawer>

        </div>



    </div>
</template>

<script>
import { ref } from "vue";
import axios from "axios";
import { ElNotification } from 'element-plus'
import { ElTable, ElTableColumn } from 'element-plus';



export default {
    name: "basetable",
    setup() {
        const queryInfo = ref({
            edate: "",
            eid: "",
            ename: "",
            currentPage: 1,
            pageSize: 6,
        })

        let pb = ref({
            currentPage: 1,
            pageSize: 6,
            list: [],
            totalPage: 0,
            totalCount: 0,
        })

        // 定义变量
        const ruleForm = ref({
            eid: "",
            edate: "",
            ename: '',
            egender: '',
            ephone: '',
        })

        // 发起一个post请求
        axios({
            method: 'post',
            url: 'http://localhost:8080/api/clockPageBeanServlet',
            data: queryInfo.value
        }).then(function (resp) {

            pb.value = resp.data.data
        });

        const search = () => {

            axios({
                method: 'post',
                url: 'http://localhost:8080/api/clockPageBeanServlet',
                data: queryInfo.value
            }).then(function (resp) {
                pb.value = resp.data.data
                console.log(resp.data)
                if (resp.data.data.list.length != 0) {
                    ElNotification({
                        title: 'success',
                        message: '搜索成功',
                        type: 'success',
                    })
                } else {
                    ElNotification({
                        title: 'warning',
                        message: '搜索失败或搜索数据为null',
                        type: 'warning',
                    })
                }


            });
        }

        //跳转分页
        const handlePageChange = (val) => {
            axios({
                method: 'post',
                url: 'http://localhost:8080/api/clockPageBeanServlet',
                data:
                {
                    edate: queryInfo.value.edate,
                    eid: queryInfo.value.eid,
                    ename: queryInfo.value.ename,
                    currentPage: val,
                    pageSize: queryInfo.value.pageSize,

                }
            }).then(function (resp) {
                pb.value = resp.data.data
                console.log(pb.value)
            });
        }

        //重置
        const flush = () => {
            window.location.reload()
        }

        const drawer = ref(false)

        const btu = (row) => {
            drawer.value = true
            ruleForm.value = row


        }

        const close=() => { 
           drawer.value=false
        }



        return {
            queryInfo,
            pb,
            search,
            handlePageChange,
            flush,
            ElNotification,
            btu,
            drawer,
            ruleForm,
            close





        };
    }

};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>